<!-- 富文本编辑器 -->
<script setup lang="ts">
import "@wangeditor/editor/dist/css/style.css";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import {
  onBeforeUnmount,
  ref,
  shallowRef,
  onMounted,
  getCurrentInstance,
  defineEmits
} from "vue";
import AppUtil from "@/utils/AppUtil";

defineOptions({
  name: "BaseEditor"
});
const model = defineModel();
const instance = getCurrentInstance();

const mode = "default";
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef();

// 内容 HTML
// const valueHtml = ref("");

// 模拟 ajax 异步获取内容
onMounted(() => {
  // setTimeout(() => {
  //   valueHtml.value = "qwww";
  // }, 2000);
  // console.log("editor mounted", valueHtml.value);
});

const toolbarConfig: any = { excludeKeys: ["fullScreen", "group-video"] };

const editorConfig = { placeholder: "请输入内容...", MENU_CONF: {} };
editorConfig.MENU_CONF["uploadImage"] = {
  // 服务端上传地址，根据实际业务改写
  server: "/api/v1/resources/public",
  // form-data 的 fieldName，根据实际业务改写
  fieldName: "file",
  // 选择文件时的类型限制，根据实际业务改写
  allowedFileTypes: [
    "image/png",
    "image/jpg",
    "image/jpeg",
    "image/gif",
    "image/webp"
  ],
  // 自定义插入图片
  customInsert(res: any, insertFn) {
    console.log("customInsert", res);
    // instance.proxy.$alert(res.msg);
    // res.data.url是后端返回的图片地址，根据实际业务改写
    if (res.code == 200) {
      // insertFn插入图片进编辑器
      // insertFn(AppUtil.imgHost + res.data);
      editorRef.value.dangerouslyInsertHtml(
        `<img src="${AppUtil.imgHost + res.data.url}" alt="" data-href="" style="width: 100%;"/>`
      );
      // model.value= model.value+`<img src="${res.data}" style="width:100%;" />`
    } else {
      instance.proxy.$alert(res.msg);
    }
  }
};

const handleCreated = editor => {
  // 记录 editor 实例，重要！
  editorRef.value = editor;
  //   setTimeout(() => {
  //     const toolbar = DomEditor.getToolbar(editor)

  // const curToolbarConfig = toolbar.getConfig()
  // console.log('curToolbarConfig.toolbarKeys',curToolbarConfig ) // 当前菜单排序和分组
  //   }, 1000);
};

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) return;
  editor.destroy();
});

// let initialModelValue=""
// // 观察valueHtml变化并更新modelValue
// watchEffect(() => {
//   console.log(`watchEffect`);

//   const newHtml = valueHtml.value;

//   try {
//     // 防止XSS攻击：如果需要展示这个HTML，应在其他地方进行清理
//     // 这里假设newHtml已经是安全的或将在其他地方进行清理
//     if (newHtml !== initialModelValue) {
//       console.log("HTML内容更改：", newHtml); // 在生产环境中，应使用更灵活的日志策略
//       initialModelValue= newHtml;
//       emit('update:modelValue', newHtml);
//     } else {
//       console.log("HTML内容未更改，避免不必要的更新"); // 同上
//     }
//   } catch (error) {
//     console.error("处理HTML更新时出现错误：", error);
//     // 根据你的应用需求，这里可以加入错误处理逻辑，比如回滚操作、错误上报等
//   }
// });
</script>

<template>
  <div class="wangeditor">
    <Toolbar
      :editor="editorRef"
      :defaultConfig="toolbarConfig"
      :mode="mode"
      style="border-bottom: 1px solid #ccc"
    />

    <Editor
      v-model="model"
      :defaultConfig="editorConfig"
      :mode="mode"
      style="height: 500px; overflow-y: hidden"
      @onCreated="handleCreated"
    />
  </div>
</template>
